.advanced-banners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
    width: 100%;
    max-width: 1360px;

    @media only screen and (max-width: 992px) {
        grid-template-columns: 1fr;
    }
}

.advanced-banner {
    position: relative;
    display: flex;
    min-height: 270px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(128deg, var(--advanced-banner-primary, var(--pp-blue)) 40%, var(--advanced-banner-secondary, #024466) 100%);
    transition: transform 0.3s, box-shadow 0.3s;

    .advanced-banner__text {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 56%;
        padding: var(--space-m) var(--space-2xs) var(--space-m) var(--space-m);
    }

    .advanced-banner__eyebrow {
        position: absolute;
        top: var(--space-xs);
        right: var(--space-xs);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        padding: var(--space-3xs) var(--space-2xs);
        color: var(--pp-blue);
        background: var(--pp-yellow);
        font-size: var(--step--2);
        font-weight: 700;
    }

    .advanced-banner__eyebrow-icon {
        object-fit: contain;
    }

    h2 {
        margin: 0 0 var(--space-2xs);
        color: #fff;
        font-size: var(--step-2);
        line-height: 1.1;
        text-align: left;
    }

    p {
        margin: 0 0 var(--space-xs);
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--step--1);
        line-height: 1.45;
    }

    .advanced-banner__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3xs);
        margin: 0 0 var(--space-s);
        padding: 0;
        list-style: none;

        li {
            margin: 0;
            padding: var(--space-3xs) var(--space-2xs);
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: var(--step--2);
            font-weight: 600;
            line-height: 1.4;
        }
    }

    .button-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-top: auto;

        i {
            transition: transform 0.3s;
        }
    }

    .advanced-banner__media {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 1;
        width: 48%;
        clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
        transition: clip-path 0.4s ease;
    }

    .advanced-banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    &:is(:hover, :focus-within) {
        transform: scale(1.02);
        box-shadow: rgba(25, 33, 67, 0.35) 10px 5px 45px;

        .button-primary i {
            transform: translateX(5px);
        }

        .advanced-banner__media {
            clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
        }

        .advanced-banner__image {
            transform: scale(1.06);
        }
    }

    @media only screen and (max-width: 768px) {
        .advanced-banner__text {
            padding: var(--space-s) var(--space-2xs) var(--space-s) var(--space-s);
        }

        h2 {
            font-size: var(--step-1);
        }
    }

    @media only screen and (max-width: 576px) {
        flex-direction: column;

        .advanced-banner__text {
            width: 100%;
            padding: var(--space-m) var(--space-s) var(--space-s);
        }

        .advanced-banner__media {
            position: relative;
            width: 100%;
            height: 180px;
            clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
        }

        &:is(:hover, :focus-within) .advanced-banner__media {
            clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        &,
        * {
            transition: none !important;
        }
    }
}

.banners {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-s);

    .banners__banner {
        position: relative;
        min-height: 300px;
        width: 100%;
        max-width: 1360px;
        max-height: 400px;
        padding: var(--space-s);
        display: flex;
        align-items: center;
        background-color: #dadada;
        gap: var(--space-m);
    }

    .banners__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: left;
        object-fit: cover;
        z-index: 0;
    }

    .banners__content {
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

    .banners__buttons {
        display: flex;
    }

    .banners__image {
        position: absolute;
        right: 0;
        width: auto;
        height: 100%;
        max-width: 40%;
        object-fit: contain;
        z-index: 1;
    }
}

@media only screen and (max-width: 996px) {
    .banners {
        .banners__banner {
            max-height: fit-content;
        }

        .banners__text {
            font-size: var(--step--1);
            line-height: var(--step-0);
        }
    }
}

@media only screen and (max-width: 768px) {
    .banners {
        .banners__banner {
            max-height: fit-content;
        }

        p, h3 {
            max-width: 100% !important;
        }

        .banners__image {
            display: none;
        }
    }
}